<template>
  <div style="position: relative; width: 100%; height: 100%">
    <!-- 盒子1 -->
    <div
      style="
        position: fixed;
        left: 200px;
        top: 100px;
        width: 40px;
        height: 40px;
        background-color: #ff0;
        cursor: move;
      "
      id="dragBox1"
    ></div>
    <!-- 盒子2 -->
    <div
      id="movePeople"
      style="
        position: fixed;
        right: 200px;
        top: 100px;
        width: 40px;
        height: 40px;
        background-color: #ff0;
      "
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    dragBox1() {
      let dragBox1 = document.getElementById("dragBox1");

      var isMouseDown;

      dragBox1.addEventListener("mousedown", function () {
        isMouseDown = true;
      });

      document.addEventListener("mousemove", function (e) {
        if (isMouseDown) {
          dragBox1.style.left = e.clientX - 20 + "px";
          dragBox1.style.top = e.clientY + "px";
        }
      });

      dragBox1.addEventListener("mouseup", function () {
        isMouseDown = false;
      });
    },
    movePeople1() {
      let that = this;
      document.addEventListener("keydown", function (event) {
        let movePeople = document.getElementById("movePeople");
        that.$nextTick(() => {
            let speed = 20

          if (event.keyCode == 38) {
            let wz = movePeople.style.top.replace("px", "") * 1 - speed;
            if (wz < 70) {
              wz = 70;
            }
            movePeople.style.top = wz + "px";
          } else if (event.keyCode == 40) {
            let wz = movePeople.style.top.replace("px", "") * 1 + speed;
            if (wz > 618) {
              wz = 618;
            }
            movePeople.style.top = wz + "px";
          } else if (event.keyCode == 37) {
            let wz = movePeople.style.right.replace("px", "") * 1 + speed;
            if (wz > 1342) {
              wz = 1342;
            }
            movePeople.style.right = wz + "px";
          } else if (event.keyCode == 39) {
            let wz = movePeople.style.right.replace("px", "") * 1 - speed;
            if (wz < 155) {
              wz = 155;
            }
            movePeople.style.right = wz + "px";
          }
        });
        that.$forceUpdate();
      });
    },
  },
  mounted() {
    this.dragBox1();
    this.movePeople1();
  },
};
</script>

<style lang="scss" scoped>
</style>